<template>
  <view class="bottom-tab">
    <view 
      v-for="(item, index) in tabList" 
      :key="index" 
      :class="{ 'active': currentIndex === index }"
      @click="switchTab(index)"
    >
      <view class="tab-icon">
        <text class="iconfont" :class="item.icon"></text>
      </view>
      <view class="tab-text">{{ item.text }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const currentIndex = ref(0);
const tabList = ref([
  { text: "新闻", icon: "icon-news" },
  { text: "视频", icon: "icon-video" },
  { text: "话题", icon: "icon-topic" },
  { text: "未登录", icon: "icon-user" }
]);

const switchTab = (index) => {
  currentIndex.value = index;
};
</script>

<style scoped>
.bottom-tab {
  display: flex;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  height: 100rpx;
  align-items: center;
}
.bottom-tab view {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tab-icon {
  font-size: 40rpx;
  margin-bottom: 6rpx;
}
.tab-text {
  font-size: 24rpx;
  color: #666;
}
.active .tab-text {
  color: #d92929;
}
.active .iconfont {
  color: #d92929;
}
</style>